<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<meta charset="UTF-8" />
	<title>VAOI || Colección</title>
	<meta
		content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
		name='viewport' />

</h:head>

<h:body class="skin-green">
	<ui:composition template="/ADMIN/menuAdmin.xhtml">
		<ui:define name="body">
			<f:view>

				<!-- Site wrapper -->
				<div  style="min-height:100%">

						
							<p:ajaxStatus onstart="$('#progressBar').modal('show');"
								onsuccess="$('#progressBar').modal('hide');" />

							<div class="modal fade" id="progressBar" tabindex="-1"
								role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">

											<h4 class="modal-title" align="center">Cargando</h4>
										</div>
										<div class="modal-body">

											<div class="progress progress-striped active">
												<div class="progress-bar progress-bar-success"
													role="progressbar" aria-valuenow="100" aria-valuemin="0"
													aria-valuemax="100" style="width: 100%"></div>
											</div>

										</div>

									</div>
								</div>
							</div>
							<!-- Barra de Progreso -->
		

								<h:form id="form">
									<p:messages id="msg" />

									<div class="panel panel-default" style="height:780px">

										<div class="panel-heading" align="center"
											style="font-family: sans-serif; font-size: 150%;">Colecciones</div>

										<div class="panel-body">

											<div align="center">

												<p:commandButton id="btnCrear" value="Crear Coleccion"
													icon="ui-icon-plusthick"
													onclick="$('#dlgColeccion').modal('show');"
													styleClass="btn btn-primary" update=":formDlg:messages">
												</p:commandButton>

											</div>

											<p:spacer height="10px" />

											<p:scrollPanel style="height:500px" mode="native">
												<p:tree id="txtColecciones"
													value="#{coleccionesView.raizColecciones}"
													var="colecciones" selectionMode="single"
													style="margin: 0 auto;width:500px;width:auto;width:100%;height:auto"
													selection="#{coleccionesView.seleccionColecciones}">

													<p:treeNode icon="ui-icon-folder-collapsed">
														<h:outputText value="#{colecciones.nombre}" />
													</p:treeNode>
												</p:tree>
											</p:scrollPanel>

											<p:contextMenu for="txtColecciones">

												<p:menuitem value="Modificar"
													action="#{coleccionesView.modificar()}"
													icon="ui-icon-pencil"
													onclick="$('#dlgModificar').modal('show');"
													update=":formDlg2:messages, :formDlg2:txtNombreC2" />

												<p:menuitem value="Eliminar" icon="ui-icon-trash"
													ajax="false"
													action="#{coleccionesView.action_delete_master()}" />

											</p:contextMenu>

										</div>

									</div>

								</h:form>

								<h:form id="formDlg">

									<div class="modal fade" id="dlgColeccion" tabindex="-1"
										role="dialog" aria-labelledby="myModalLabel"
										aria-hidden="true">
										<div class="modal-dialog">
											<div class="modal-content">
												<div class="modal-header">

													<h4 class="modal-title" align="center">Crear Colección</h4>
												</div>
												<div class="modal-body">

													<p:messages id="messages" closable="true" />

													<p:inputText id="txtNombreC"
														requiredMessage="El nombre es requerido"
														styleClass="form-control"
														binding="#{coleccionesView.txtNombre}"
														placeholder="Nombre Colección" />

													<p:spacer height="10px" />

													<div align="center">
														<p:commandButton id="buttonCrear" value="Crear"
															styleClass="btn btn-primary"
															action="#{coleccionesView.action_create()}"
															update=":formDlg:messages" />
														<p:commandButton value="Cerrar"
															styleClass="btn btn-danger" update="formDlg, :form" />

													</div>

												</div>

											</div>
										</div>
									</div>
									<!-- Fin Dialogo Modificar -->

								</h:form>

								<h:form id="formDlg2">

									<div class="modal fade" id="dlgModificar" tabindex="-1"
										role="dialog" aria-labelledby="myModalLabel"
										aria-hidden="true">
										<div class="modal-dialog">
											<div class="modal-content">
												<div class="modal-header">

													<h4 class="modal-title" align="center">Modificar
														Colección</h4>
												</div>
												<div class="modal-body" id="panelModificar">

													<p:messages id="messages" autoUpdate="false"
														closable="true" />

													<p:outputLabel value="Nombre Colección:" />
													<p:inputText id="txtNombreC2" styleClass="form-control"
														binding="#{coleccionesView.txtNombreModificar}"
														placeholder="Nombre Colección" />

													<p:spacer height="10px" />

													<div align="center">
														<p:commandButton value="Modificar" class="btn btn-primary"
															action="#{coleccionesView.action_modify}"
															update="messages" />

														<p:commandButton value="Cerrar" class="btn btn-danger"
															update="formDlg2" />

													</div>

												</div>

											</div>
										</div>
									</div>
									<!-- Fin Dialogo Modificar -->


								</h:form>
					
					</div>
					<!-- /.content-wrapper -->

				<!-- ./wrapper -->

			</f:view>
		</ui:define>
	</ui:composition>

</h:body>

</html>